<template>
  <div class="home">
    <h1>Date Navigation</h1>
    <label for="type">Select Type:</label>
    <select v-model="type" id="type">
      <option value="day">Day</option>
      <option value="month">Month</option>
      <option value="year">Year</option>
    </select>

    <p>{{ formattedDate }}</p>
    <button @click="previous">Previous {{ type }}</button>
    <button @click="next">Next {{ type }}</button>
    <hr />
    <h1>Week Navigation</h1>
    <p>Current Week: {{ currentWeek }}</p>
    <button @click="previousWeek">Previous Week</button>
    <button @click="nextWeek">Next Week</button>
  </div>
</template>

<script>
export default {
  name: '',
  components: {
  },
  data () {
    return {
      currentDate: new Date(),
      type: 'day' // Default to 'day'
    }
  },
  computed: {
    formattedDate () {
      const year = this.currentDate.getFullYear();
      const month = String(this.currentDate.getMonth() + 1).padStart(2, '0');
      const day = String(this.currentDate.getDate()).padStart(2, '0');

      switch (this.type) {
        case 'day':
          return `${year}-${month}-${day}`;
        case 'month':
          return `${year}-${month}`;
        case 'year':
          return `${year}`;
      }
    },
    currentWeek() {
      return this.getWeekNumber(this.currentDate);
    }
  },
  methods: {
    getWeekNumber(date) {
      // 获取当前年的第一个星期一
      const startOfYear = new Date(date.getFullYear(), 0, 1);
      const dayOfWeek = startOfYear.getDay();
      const startOffset = (dayOfWeek <= 4 ? dayOfWeek : dayOfWeek - 7) - 1;
      const firstMonday = new Date(startOfYear);
      firstMonday.setDate(startOfYear.getDate() - startOffset);

      // 计算当前日期距离第一个星期一的天数差
      const diffInMs = date - firstMonday;
      const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
      const weekNumber = Math.floor(diffInDays / 7) + 1;

      return weekNumber;
    },
    previousWeek() {
      this.currentDate.setDate(this.currentDate.getDate() - 7);
      this.currentDate = new Date(this.currentDate); // Trigger reactivity
    },
    nextWeek() {
      this.currentDate.setDate(this.currentDate.getDate() + 7);
      this.currentDate = new Date(this.currentDate); // Trigger reactivity
    },
    previous () {
      switch (this.type) {
        case 'day':
          this.currentDate.setDate(this.currentDate.getDate() - 1);
          break;
        case 'month':
          const currentMonth = this.currentDate.getMonth();
          this.currentDate.setMonth(currentMonth - 1);
          // Correct day if it exceeds the number of days in the previous month
          if (this.currentDate.getMonth() === currentMonth - 2) {
            this.currentDate.setDate(0);
          }
          break;
        case 'year':
          this.currentDate.setFullYear(this.currentDate.getFullYear() - 1);
          break;
      }
      this.currentDate = new Date(this.currentDate); // Trigger reactivity
    },
    next () {
      switch (this.type) {
        case 'day':
          this.currentDate.setDate(this.currentDate.getDate() + 1);
          break;
        case 'month':
          const currentMonth = this.currentDate.getMonth();
          this.currentDate.setMonth(currentMonth + 1);
          // Correct day if it exceeds the number of days in the next month
          if (this.currentDate.getMonth() === currentMonth + 2) {
            this.currentDate.setDate(0);
          }
          break;
        case 'year':
          this.currentDate.setFullYear(this.currentDate.getFullYear() + 1);
          break;
      }
      this.currentDate = new Date(this.currentDate); // Trigger reactivity
    },

  }
}
</script>
